class Depend {
  constructor() {
    this.reactiveFns = [];
  }

  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn);
  }

  notify() {
    this.reactiveFns.forEach((fn) => {
      fn();
    });
  }
}

// 封装一个响应式的函数
const depend = new Depend();
function watchFn(fn) {
  depend.addDepend(fn);
}

// 对象的响应式
const obj = {
  name: "frank", // depend对象
  age: 18, // depend对象
};

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function (target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver);
    depend.notify();
  },
});

watchFn(function () {
  console.log("Hello World");
  console.log(objProxy.name);
});

watchFn(function () {
  console.log(objProxy.name, "demo function ------");
});

function bar() {
  console.log("普通的其他函数");
  console.log("这个函数不需要有任何响应式");
}

objProxy.name = "kobe";
